<template>
    <div class="newDepartment">
        <div class="container">
            <div class="handle-box">
                <div class="title">模板管理</div>
                <el-button
                    type="primary"
                    class="titleBtn1"
                    style="margin-right:39px;width:90px;"
                    @click="addtemplate"
                >添加模板</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                stripe
                class="table"
                ref="multipleTable"
                text-align="center"
                header-cell-class-name="table-header"
            >
                <el-table-column
                    prop="modelName"
                    label="模板名称"
                    :show-overflow-tooltip="true"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="status"
                    label="使用情况"
                    :show-overflow-tooltip="true"
                    align="center"
                ></el-table-column>
                <el-table-column prop="password" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="deletetemplate(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout=" prev, pager, next"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { modellist, findDeptAll, modeldelete } from '../../api/index.js';
export default {
    name: 'basetable',
    data() {
        return {
            page: 1,
            pageSize: 10,
            pageTotal: 0,
            tableData: [] //列表数据
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取模板列表
        getData() {
            let query = {
                page: this.page,
                pageSize: this.pageSize
            };
            modellist(query).then((res) => {
                if (res.code === 200) {
                    if (res.result.modelList) {
                        res.result.modelList.forEach((item) => {
                            if (item.status == 1) {
                                item.status = '使用中';
                            } else if (item.status == 2) {
                                item.status = '未使用';
                            }
                        });
                        this.tableData = res.result.modelList || [];
                        this.page = res.result.pageInfo.current;
                        this.pageTotal = res.result.pageInfo.total;
                        let number = res.result.pageInfo.total > 9 ? res.result.pageInfo.total + 1 : '0' + (res.result.pageInfo.total + 1);
                    } else {
                        this.tableData = [];
                        this.page = 0;
                        this.pageTotal = 0;
                    }
                } else {
                    this.$message.error(res.message);
                    this.tableData = [];
                    this.page = 0;
                    this.pageTotal = 0;
                }
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.page = val;
            this.getData();
        },

        //点击添加模板
        addtemplate() {
            this.$router.push('/addtemplate');
        },

        //删除模板
        deletetemplate(scope) {
            this.$confirm('是否确认删除该模板', {
                customClass: 'newObjectConfirm',
                center: true,
                showClose: false,
                cancelButtonClass: 'newObjectCancel',
                confirmButtonClass: 'newObjectConfirm'
            })
                .then(() => {
                    modeldelete({ modelId: scope.id })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success('删除成功');
                                this.page = 1;
                                this.getData();
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                        .catch((error) => {
                            this.$message.success(error);
                        });
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped lang="scss">
.container {
    box-shadow: none;
    margin-top: 0;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.content {
    background: #fff;
}
.title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-right: 80px;
    min-width: 120px;
}
.titleBtn {
    width: 90px;
    height: 35px;
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    border-radius: 5px;
}
.titleBtn1 {
    width: 90px;
    height: 35px;
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    font-size: 16px;
    border-radius: 5px;
}
.handle-box .name {
    margin-right: 10px;
}
.mr20 {
    margin-right: 30px;
    min-width: 240px;
}
.handle-select {
    width: 140px;
}
.searchBox {
    min-width: 240px;
    margin-left: auto;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.title {
    float: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.newForm {
    .el-form-item {
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 0;
    }
    .newFormInput/deep/.el-input__inner {
        border: none;
        width: 450px;
        height: 62px;
        line-height: 62px;
    }
    /deep/.el-form-item__label {
        font-size: 16px;
        padding: 0;
        line-height: 62px;
    }
}
.newDepartment/deep/.el-dialog__body {
    max-height: 400px;
    margin-top: 16px;
    // padding-top:155px!important;
    overflow-y: scroll;
    position: relative;
}
.tableBtnBox {
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
    /deep/.el-input.is-disabled > .el-input__inner {
        background: #fff !important;
    }
}
.newObjectConfirm {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    background: rgba(0, 79, 171, 1) !important;
}
.newObjectCancel {
    width: 90px !important;
    height: 35px;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px;
}
.newForm/deep/.el-input__inner {
    font-size: 16px;
}
</style>
